<template>
	<view>
		<!-- #ifndef MP -->
			<view class="join" v-if="$store.state.isLogin==false">
				<button @click="goLogin">加入我们</button>
			</view>
			<view class="infor" v-if="$store.state.isLogin==true">
				<view class="photo">
					<image :src="$store.state.userInfo.avatarUrl" mode="widthFix"></image>
				</view>
				<view class="name">
					{{$store.state.userInfo.loginName}}
				</view>
			</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
			<view class="join" v-if="login==false">
				<button @click="goLogin">加入我们</button>
			</view>
			<view class="infor" v-if="login==true">
				<view class="photo">
					<image :src="inforData.avatarUrl" mode="widthFix"></image>
				</view>
				<view class="name">
					{{inforData.loginName}}
				</view>
			</view>
		<!-- #endif -->
		<view class="box">
			<view >
				<image class="left-img" src="../../static/images/infor.png" mode="widthFix"></image>
				<text>个人信息维护</text>
			</view>
			<view class="about">
				<image src="../../static/images/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="box">
			<view >
				<image class="left-img" src="../../static/images/about.png" mode="widthFix"></image>
					<text>关于我们</text>
			</view>
			<view class="about">
				<image src="../../static/images/right.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {getGet} from "api/index.js"
	export default {
		data() {
			return {
				login:false,
				inforData:""
			};
		},
		methods:{
			goLogin(){
				uni.navigateTo({
					url:"../login/login"
				})
			}
		},
		onLoad(e) {
			console.log(e)
			this.login=e.login
			getGet("/pcUser/login-user/info").then(res=>{
				// console.log(res)
				if(res.data.code==0){
					this.login=true
					this.inforData=res.data.userInfo
				}
			})
		}
	}
</script>

<style lang="less" scoped>
.join{
	height: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ddd;
}
.about{
	image{
		width: 40rpx;
	}
}
.left-img{
	width: 60rpx;
	vertical-align: middle;
	margin-right: 20rpx;
}
.box{
	padding: 15rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
}
.infor{
	height: 400rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.photo{
	image{
		width: 200rpx;
		border-radius: 50%;
	}	
}
.name{
	font-size: 40rpx;
}
</style>
